<template>
  <a-layout class="layout-default-container">
    <a-layout-header class="layout-default-header">
      <div>
        <div class="logo">My Blog</div>
        <NavMenu :menus="navMenus"></NavMenu>
        <div class="user-info">
          <a-dropdown v-model="dropdownVisible" :trigger="['click']">
            <a-avatar class="dropdown-link" style="cursor: pointer;" :src="avatarUrl" icon="user" @click="handleAvatarClick" />
        
            <template v-if="isLogin">
              <a-menu slot="overlay" @click="handleMenuClick">
                <a-menu-item key="logout">
                  <a-icon type="logout" /> 退出
                </a-menu-item>
              </a-menu>
            </template>
            
          </a-dropdown>
        </div>
        
      </div>
    </a-layout-header>

    <a-layout-content class="layout-default-content">
      <Nuxt />
    </a-layout-content>

    <a-layout-footer class="layout-default-footer">
      Copyright © 2020-{{copyRightEndYear}} 灰色の幽默 All Rights Reserved V.1.0.0 备案号 xxxxxx
    </a-layout-footer>

    <a-back-top />

    <client-only>
      <login-modal-form v-model="modalVisible"></login-modal-form>
    </client-only>
  </a-layout>
</template>

<script lang="ts">
  import { Vue, Component, Watch, Emit, Provide } from 'vue-property-decorator';
  import { INavMenu } from '@/models/nav-menu.model';
  import { IUserModel } from '@/models/user.model';

  @Component({
    components: {
      NavMenu: () => import('@/components/nav-menu.vue'),
    },
  })
  export default class Default extends Vue {
    @Watch('$store.state.user.userInfo', { deep: true })
    onWatchUserInfo(newVal: IUserModel): void {
      this.isLogin = !!(newVal && newVal._id);
      this.avatarUrl = this.isLogin ? newVal.avatar : '';
    }

    navMenus: INavMenu[] = [
      { path: '/', name: 'index', text: '首页' },
      { path: '/article', name: 'article', text: '文章' },
    ];
    isLogin: boolean = false;
    avatarUrl: string | undefined = '';
    dropdownVisible: boolean = false;
    modalVisible: boolean = false;

    get copyRightEndYear(): number {
      return new Date().getFullYear();
    }

    handleAvatarClick(): void {
      if (this.isLogin) return;
      this.modalVisible = true;
    }
    
    handleMenuClick(e: { [key: string]: any }): void {
      this.dropdownVisible = false;
      switch (e.key) {
        case 'logout':
          this.$confirm({
            content: '是否退出登录?',
            okText: '确定',
            cancelText: '取消',
            onOk: () => {
              this.$store.dispatch('user/logout');
            },
          });
          break;
      }
    }
  }
</script>

<style lang="scss">
  @import "../assets/scss/design/index";

  *,
  *:before,
  *:after {
    box-sizing: border-box;
  }

  html, body {
    font-family:
      'Source Sans Pro',
      -apple-system,
      BlinkMacSystemFont,
      'Segoe UI',
      Roboto,
      'Helvetica Neue',
      Arial,
      sans-serif;
    font-size: 14px;
    word-spacing: 1px;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
  }

  a {
    color: $color-text-dark !important;

    &:active {
      color: $color-text-dark !important;
    }

    &:hover {
      color: $color-text-primary !important;
    }
  }

  .layout-default-container {
    .layout-default-header {
      position: fixed;
      z-index: 3;
      width: 100%;
      height: 60px;
      background-color: #fff;
      box-shadow: 0 0 5px 1px $color-border;

      > div {
        width: 100%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .logo {
        width: 120px;
        height: 60px;
        flex: 0 1 auto;
      }
      
      .user-info {
        width: 120px;
        height: 60px;
        flex: 0 1 auto;
      }
    }

    .layout-default-content {
      padding: 20px 0;
      margin-top: 60px;
      background: url("../static/images/constructive_bg_01.jpg") center fixed no-repeat;

      > div {
        width: 100%;
        min-height: calc(100vh - 60px - 70px - 12px * 2);
        margin: 0 auto;
        position: relative;
      }
    }

    .layout-default-footer {
      text-align: center;
    }
  }

  @media screen and (min-width: 1200px) {
    .layout-default-container {
      .layout-default-header {
        > div {
          width: 1200px;
        }
      }

      .layout-default-content {
        > div {
          width: 1200px;
        }
      }
    }
  }
</style>
